<template>
    <div>

        <div id="container">
        </div>
        <div class="Search">
            <el-input v-model="Search" placeholder="搜索" class="put"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchFn">搜索</el-button>
        </div>


    </div>
</template>

<style scoped>
html {
    height: 100%
}


body {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#container {
    height: 720px;

}

.put {
    width: 200px;
    margin-right: 15px;
}

.Search {
    position: fixed;
    z-index: 7000;
    left: 50%;
    top: 100px;
}
</style>



<script>
// let BMapGL = {}
export default {

    data() {
        return {
            map: null,
            searchMap: null,
            Search: '',

        };
    },
    methods: {
        searchFn() {
            this.map && this.searchMap.search(this.Search)
        },
        init() {
            window && navigator.geolocation.getCurrentPosition((position) => {
                const _this = this
                const BMapGL = window.BMapGL
                const point = new BMapGL.Point(position.coords.longitude, position.coords.latitude)
                _this.map = new BMapGL.Map("container")
                _this.map.centerAndZoom(point, 15)
                _this.map.addOverlay(new BMapGL.Marker(point, { title: '' }))
                _this.searchMap = new BMapGL.LocalSearch(_this.map, {
                    renderOptions: { map: _this.map }

                })
                _this.map.enableScrollWheelZoom(true);
            })
        }
    },
    mounted() {
        this.init()

    }
}
</script>
